<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>旋转</title>
    <style>
        canvas{
            border:1px solid #000;
            margin-top: 200px;
        }
        .bg{
            text-align: center;
        }
    </style>
</head>
<body>
<div class="bg">
    <canvas width="500" height="400" id="canvas" style="">
        您的浏览器不支持canvas，请更新！
    </canvas>
</div>
</body>
<script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext("2d");
    var deg1=15;
    var deg2=30;
    var p1=new Image();
    p1.src="img/p3.png";
    p1.onload=function(){
        setInterval(function () {
            ctx.clearRect(0,0,500,400)
          //绘制飞机1
            //1·平移
            ctx.translate(100,50);
            //2·旋转
            ctx.rotate(deg1*Math.PI/180);
            //3·绘制飞机1
            ctx.drawImage(p1,-100,-50,200,100);
            //4·逆向旋转
            ctx.rotate(-deg1*Math.PI/180);
            //5·逆向平移
            ctx.translate(-100,-50);
            //6·更新状态
            deg1+=15;
            //绘制飞机2
            ctx.translate(400,50);
            ctx.rotate(deg2*Math.PI/180);
            ctx.drawImage(p1,-100,-50,200,100);
            ctx.rotate(-deg2*Math.PI/180);
            ctx.translate(-400,-50);
            deg2+=30;
        },100)


    }

</script>
</html>